<template>

  <div>

    <el-divider content-position="left">
      <span style="font-weight: bold">我的课程</span>
    </el-divider>
    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >

      <template #filter-content>

        <dic-list-select v-model="listQuery.params.isMust" dic-code="course_need" />
<!--        <dic-catalog-tree v-model="listQuery.params.catId" dic-code="course_catalog" width="200" class="filter-item" />-->
        <el-input v-model="listQuery.params.title" placeholder="搜索课程" size="small" style="width: 200px;" class="filter-item" />
      </template>

      <template #data-columns>

        <el-table-column
          label="课程名称"
          prop="title"
          show-overflow-tooltip
        >

          <template v-slot="scope">
            <detail-link :id="scope.row.id" :title="scope.row.title" to="UpdateCourse" permission="course:update" />
          </template>

        </el-table-column>

        <el-table-column
          label="分类"
          prop="catId_dictText"
          align="center"
          width="150px"
        />

        <el-table-column
          label="开放类型"
          prop="openType_dictText"
          align="center"
          width="120px"
        />

        <el-table-column
          label="课时"
          prop="periods"
          align="center"
          width="100px"
        />

        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          width="180px"
        />

        <el-table-column
          align="center"
          label="状态"
          prop="state_dictText"
          width="100px"
        />

        <el-table-column
          label="操作"
          align="center"
          width="220px"
        >

          <template v-slot="scope">

            <router-link :to="{ name: 'CourseStat', params: { courseId: scope.row.id }}" style="margin-left: 10px">
              <el-link type="primary" icon="el-icon-pie-chart">统计分析</el-link>
            </router-link>

            <el-link style="margin-left: 10px" type="primary" icon="el-icon-chat-dot-square" @click="showShare(scope.row.id)">分享链接</el-link>

          </template>

        </el-table-column>

      </template>

    </data-table>
    <el-divider content-position="left">
      <span style="font-weight: bold">其他课程</span>
    </el-divider>

    <data-table
        ref="pagingTable"
        :options="optionsOther"
        :list-query="listQueryOther"
    >

      <template #filter-content>

        <dic-list-select v-model="listQueryOther.params.isMust" dic-code="course_need" />
<!--        <dic-catalog-tree v-model="listQuery.params.catId" dic-code="course_catalog" width="200" class="filter-item" />-->
        <el-input v-model="listQueryOther.params.title" placeholder="搜索课程" size="small" style="width: 200px;" class="filter-item" />
      </template>

      <template #data-columns>

        <el-table-column
            label="课程名称"
            prop="title"
            show-overflow-tooltip

        >

          <template v-slot="scope">
<!--            <detail-link  :id="scope.row.id" :title="scope.row.title" to="UpdateCourse" permission="course:update" />-->
            <a
                class="d-link"
                :href="`http://111.63.183.17:8082/#/web/course/view/${scope.row.id}`"
                target="_blank"
            >
            {{ scope.row.title }}
            </a>
          </template>

        </el-table-column>

        <el-table-column
            label="分类"
            prop="catId_dictText"
            align="center"
            width="150px"
        />

        <el-table-column
            label="开放类型"
            prop="openType_dictText"
            align="center"
            width="120px"
        />

        <el-table-column
            label="课时"
            prop="periods"
            align="center"
            width="100px"
        />

        <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="180px"
        />

        <el-table-column
            align="center"
            label="状态"
            prop="state_dictText"
            width="100px"
        />



      </template>

    </data-table>
    <share-course-dialog
      :dialog-show.sync="shareDialog"
      :course-id="courseId"/>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import DicCatalogTree from '@/components/DicTreeSelect'
import DicListSelect from '@/components/DicListSelect'
import DetailLink from '@/components/DetailLink'
import ShareCourseDialog from '@/views/admin/course/components/ShareCourseDialog'
import { mapGetters } from 'vuex'
import {pagingTree} from "@/api/sys/depart/depart";

export default {
  name: 'QuList',
  components: { ShareCourseDialog, DetailLink, DicListSelect, DicCatalogTree, DataTable },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: ''
        }
      },
      listQueryOther: {
        current: 1,
        size: 10,
        params: {
          title: ''
        }
      },
      options: {

        isCurrentVisible:true,
        // 可批量操作
        multi: true,

        add: {
          enable: !this.selectMode,
          permission: 'course:add',
          router: { name: 'AddCourse' }
        },
        edit: {
          enable: true,
          permission: 'course:update',
          router: { name: 'UpdateCourse', params: { id: '$id' }}
        },
        delete: {
          enable: true,
          permission: 'course:delete',
          url: '/api/course/course/delete'
        },
        // 列表请求URL
        listUrl: '/api/course/course/paging',
        // 批量操作列表
        multiActions: [
          {
            value: 'enable',
            label: '启用',
            permission: 'course:update',
            url: '/api/course/course/state'
          }, {
            value: 'disable',
            label: '禁用',
            permission: 'course:update',
            url: '/api/course/course/state'
          }
        ]
      },
      optionsOther: {

        isCurrentVisible:false,


        // 列表请求URL
        listUrl: '/api/course/course/paging',

      },
      shareDialog: false,
      courseId: ''
    }
  },
  computed: {
    ...mapGetters([
      'siteData'
    ])
  },
  methods: {

    showShare(id) {
      this.shareDialog = true
      this.courseId = id
      console.log('课程ID', this.courseId)
    }
  }
}
</script>
<style scoped>
.el-divider__text {
  background-color: #F5F6FA !important; /* 设置背景透明 */
}
.el-divider {
  border: 1px solid #dcdfe6; /* 设置分割线的粗细和颜色 */
  font-weight: 700;
}
.d-link{
  color: #1890ff;
  font-weight: 700;
}

.d-link:hover{
  color: #ff8000;
}
</style>
